import React, { Component } from 'react'
import {SubmitApi} from '../../request/api'
import { withRouter } from 'react-router-dom'
import { connect} from 'react-redux'
import Goback from '../Goback';
class Panduan extends Component {
  constructor(props){
    super(props)
    this.state = {
      activeNum:-1,
      userAnswer:'',
      showAnswer: false
    }
  }
  render() {
    console.log(this.props.obj.questionType);
    let obj = this.props.obj
    return (
      <div style={{ display: this.props.obj.questionType === 'check' ? 'block' : 'none' }}>
        <div className="title">
          <span>判断</span>
          <section>{obj.title}</section>
        </div>
        <ul className='timu_list'>
          {
            JSON.parse(obj.optionContent || "[]").map((item,index)=>(
              <li key={item.key} onClick={this.liClick.bind(this,index,item.key)}>
               <i className={this.state.activeNum===index?'iconfont icon-danxuanxiangxuanzhong':'iconfont icon-normal'}></i>
                <section>{item.key},{item.value}</section>
              </li>
            ))
          }
        </ul>
        <div className="submit" onClick={this.submitFn.bind(this)}>确认</div>
        <div className="answer" style={{ display: this.state.showAnswer ? 'flex' : 'none' }}>
         <span>答案 :</span>
         <div>{obj.answer}</div>
        </div>
        <div className="analysis">解析:</div>

        <Goback />
      </div>
      
    )
  }
   //选项点中
   liClick(index,key){
    this.setState({
      activeNum:index,
      userAnswer:key
    })
  }
   // 点击确认
   submitFn() {
    // console.log(this.props);
    // 判断用户是否做答
    if (this.state.userAnswer === "") {
      // 提示 必须作答
      console.log("请先作答")
    } else {
      SubmitApi({
        categoryCode: this.props.obj.categoryCode,
        actionType: "exam_test",
        userAnswer: this.state.userAnswer,
        actionCode: this.props.location.state.actionCode,
        id: this.props.obj.id,
      }).then(res => {
        // console.log(res);
        if (res.errCode === 0) {
          // console.log("答案提交");
          this.props.showToastFn()
          setTimeout(() => {
            this.props.hideToastFn()
          }, 1500)
          // 显示答案
          this.setState({ showAnswer: true })
        }
      })
    }
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    showToastFn() {
      dispatch({
        type: 'showToastFn', value: {
          icon: "success",
          title: "答案已移交"
        }
      })
    },
    hideToastFn() {
      dispatch({ type: "hideToastFn" })
    }
  }
}


export default connect(null, mapDispatchToProps)(withRouter(Panduan))
